<template>
  <!-- html -->
  <div class="person">
    <h2>姓名:{{ name }}</h2>
    <h2>年龄：{{ age }}</h2>
    <button @click="changeName">修改名字</button>
    <button @click="changeAge">修改年龄</button>
    <button @click="showTel">查看联系方式</button>
  </div>
</template>

<script lang="ts">
//JS 或 TS
export default {
  //选项式API
  name: "Person",
  beforeCreate() {
    // console.log("beforeCreate");
  },
  setup() {
    // console.log("setup");   执行顺序在beforeCreate()之前
    // console.log(this); //setup函数中的this是undefined,Vue3中已经弱化了this

    //数据,原来写在data中的，此时的name,age,tel都不是响应式的数据
    let name = "zs";
    let age = "18";
    let tel = "155893";
    //方法
    function changeName() {
      name = "张三"; //这样修改页面中的name没有变化 ，不是响应式的
    }
    function changeAge() {
      age += 1;
    }
    function showTel() {
      alert(tel);
    }
    //返回对象
    return { name, age, changeName, changeAge, showTel };
    //setup返回值也可以是一个渲染函数
    return () => "呵呵";
  },
};
</script>

<style scoped>
/* 样式 */
.person {
  background-color: skyblue;
  box-shadow: 0 0 10px;
  border-radius: 10px;
  padding: 20px;
}
button {
  margin: 0 5px;
}
</style>
